<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       
    </style> 
</head>
<body>
    <!-- 5 -->
    <div class="box">
        <input type="checkbox">
        <input type="text">
        <input type="radio">
        <input type="checkbox">
        <input type="password">
    </div>
</body>
<script>
    //1. javascript的typeof返回哪些数据类型？

        // 返回number,boolean,string,undefined,object,function,symbol（es6新增）
        // number:数字和NAN会返回number数字类型，nan是指l特殊非数字值，但它本身就是一个数字类型，通常在数字+字符串后出现
        // string：用""或''和``包裹的数据返回是字符串类型，input用户输入的值，返回也是字符串类型。
        // boolean：是布尔值，值是true和false会返回布尔值。
        // undefined:是指不存在的变量,像是下面这种定义一个变量但无值的时候，就会返回undefined。
            // var a;
            // console.log(typeof(a));
        // object：数组，对象都会返回object复杂类型。如果上面的a定义为null，也会返回object。
            // console.log(typeof(a=null));
        // function: Array和Date都会返回成function类型，它是方法类型，返回function或钩子函数也是同理。
        // symbol：它是es6新增的一个类型，是用Symbol函数创建的，symbol类型不能使用new关键字，因为它是基本数据类型，而不是一个对象。
        // symbol可以给变量一个唯一地址，只有它自己可以访问。就算用symbol定义两个变量a,b出来，他们两个也是指向不同内存地址的。[a != b] 但可以用a给变量c赋值，变量c是a提供的，所以它们指向同一个内存地址。
        // symbol是用来给数据定义成唯一性的，里面存储什么值并不重要，打印的时候也只会打印出symbool类型的字符串(Symbol(xx)),而不是symbol中包裹的数据。它也不能和其他类型进行运算。
            // var sym = Symbol('xx');
            // console.log(sym);

    // 2.split()和join()的区别？

        // split('')是将字符串转数组，有两个参数，第一个是从哪里分割转为数组，第二个是分割成数组的长度，如果没有就默认为全部分割。
            // 例：'123,5,9,2'  ==>  split(',')  ==>  [123,5,9,2]
            // 如果不用split直接循环  '123,5,9,2'  ==>  [1,2,3,',',5,',',9,',',2];
        // join('')是将数组连接转换成字符串，里面的参数是用来连接的值。可以是任何字符，也可以用''来代表没有值来连接。
            // 例：[123,5,9,2]  ==>  join('.')  ==>  '123.5.9.2';
            // 例：[123,5,9,2]  ==>  join('')  ==>  '123592';

    // 3.事件委托是什么？

        // 事件委托就是事件代理，一组dom元素都需要同一个事件，我们可以给它一个一个加事件，也可以通过给它的父级添加一个事件来代理，在点击父元素的时候去触发，但实际绑定事件的是子元素。
        // 优点：减少了事件绑定，节约内存，提升性能，  动态绑定，减少了重复工作。
        // 缺点：有些事件是没有冒泡机制的(focus,blur...)，有的虽然有冒泡，但需要不断变换，对性能消耗高，也不适合使用。
              // 而且如果所有事件都用事件代理，有可能会出现误判的现象。

    // 4.添加 删除 替换 插入到某个节点的方法？

        // 添加：末尾添加appendChild(添加元素)、
        // 删除：removeChild(删除元素)
        // 替换：replaceChid(新元素,旧元素)
        // 插入：insertBefore(添加的元素，添加的位置) 未规定的时候默认在结尾插入

    // 5.获取到页面中所有的checkbox怎么做（不使用第三方框架）？

        function five (){
            var inputs = document.getElementsByTagName('input');   //获取所有input标签
            var checkboxList = [];   //定义空数组用来接收多选框标签
            // 循环input标签数组，判断type值来找出是checkbox的下标，添加到checkboxList数组
            for (let i = 0; i < inputs.length; i++) {
                if(inputs[i].type == 'checkbox'){
                    checkboxList.push(inputs[i]);
                }
            }
            console.log(checkboxList);
        }
            // five();

    // 6.下列代码输出为何？解释原因
        // var foo = "11"+2-"1";
        // console.log(foo);   //111
        // console.log(typeof foo);   //number

        // 双引号字符串加2的时候，是拼接字符串，此时打印，类型是字符串类型。
        // 之后，字符串前如果有符号，会自动转换为数字类型。
        // 当一个字符串类型遇到数字类型的运算，且字符串中是纯数字，就会转为数字类型进行运算。
        // 所以就是：112 - 1 = 111；

    // 7.已知有字符串foo="get-elemenr-by-id",写一个function将其转化成驼峰表示法"getElementById"

        function str1 (){
        var str = "get-elemenr-by-id";    
        var arr = str.split('-');   //用split方法去除‘-’,转成数组
        var nothing = '';   //接收的字符串
        arr.map(item=>{
                // 循环，将item的第一位用replace方法转换成大写
            item = item.replace(item[0],item[0].toUpperCase());
                // 拼接
            nothing+=item;
        })
        console.log(nothing);
        }
        // str1();

    // 8.请介绍javascript的splice()方法

    // splice 是数组的一个方法，他会改变原来的数组结构，splice（下标,修改数量,修改内容）。
    // 在使用的时候可根据情况传递参数。传递不同参数有不同效果。

        function eight () {
            var arr = [1,5,6,9,1,2,3];
            // 只用一个参数，表示参数以后的索引下的位置开始一直截取到数组的最后
            var one = arr.splice(2);  //[6,9,1,2,3]
            // 传递两个参数，第一个参数表示开始的位置，第二个参数表示要截取的个数；如果第二个参数为0，则表示不截取。返回的空数组，原来的数组不变
            var n = arr.splice(2,3);  //[6,9,1]  
            //三个参数的时候，如果第二个参数为0，表示在下标为第一个参数的位置，截取0个数组，在下标为2的位置添加一个新项(第三个参数)
            var n = arr.splice(2,0,5);  //n => []  //arr => [1,5,5,6,9,1,2,3]
            //当第二个参数不为0,表示从第一个参数的位置开始，删除第二个参数的个数，在第一个参数的位置添加第三个参数的内容
            var n = arr.splice(2,3,5);   //n => [6,3]  //arr => [6,5,3]
        }
            // eight();
        
    // 9.比较attachEvent和addEventListener？

            // 区别
            // 1,适应的浏览器版本不同: attachEvent方法适用于IE addEventListener方法适用于FF
            // 2,针对的事件不同: attachEvent中的事件带on addEventListener中的事件不带on
            // 3,参数的个数不同:
                // attachEvent方法两个参数: 第一个参数为事件名称 第二个参数为接收事件处理的函数
                // addEventListener 有三个参数：第一个参数表示事件名称 第二个参数表示要接收事件处理的函数 第三个参数是一个bool值,一般为false
            // 4,执行事件的优先级不同: 如果多个均为 true,则外层的触发先于内层;如果多个均为 false,则内层的触发先于外层 true 的触发顺序总是在 false 之前
            // 5,对this的引用不同: attachEvent绑定的函数,没有绑定this引用 addEventListener 可以当作函数方法调用  当用bind设置this值的时候,this才指向执行函数
    
    // 10.写出一个圆的css样式

        // div{
        //     width: 50px;
        //     height: 50px;
        //     border-radius: 50%;
        //     background: orange;
        // }

    // 11.父元素#content大小未知，子元素#inner宽高都为50px。设置#inner的样式，使其在#content的正中央显示

        // .father{
        //      position: relative;
        //  } 
        // .son{
        //      position: absolute;
        //      top: 50%;
        //      left: 50%;
        //      transform: translate(-50%,-50%);
        //  }

    // 12.编写js方法，找出数组arr中重复出现过的元素
        // 输入例子：foo([1,2,4,4,3,3,1,5,3]).sort();
        // 输出例子：[1,3,4];
        
        function foo(arr){
            // console.log(arr);
           var newArr = [];
           for (let i = 0; i < arr.length; i++) {
               console.log(newArr.indexOf(arr[i]) ,arr.indexOf(arr[i]) != arr.lastIndexOf(arr[i]) ,arr[i]);
            // console.log(arr.lastIndexOf(arr[i]));
               if(newArr.indexOf(arr[i]) == -1 && arr.indexOf(arr[i]) != arr.lastIndexOf(arr[i])){
                   newArr.push(arr[i])
               }
           }
            return newArr;
        }
        // console.log(foo([1,2,4,4,3,3,1,5,3]).sort());

    // 13.编写js方法，提取url中的参数，并以key-value的形式返回到一个json结构中。
        // 输入："http://item.taobao.com/item.htm?a=1&b=2&c=&d=xxx&e"
        // 输出：{a:'1',b:'2',c:'',d:'xxx',e:undefined};
            
        function thrs () {
            var str = "http://item.taobao.com/item.htm?a=1&b=2&c=&d=xxx&e";
            var arr = str.split('?',2)[1];
            arr = arr.split('&');
            var obj = {};
            arr.forEach(item=>{
                item = item.split('=');
                obj[item[0]] = item[1];
            })
            console.log(obj);
            return obj;
        }
        // thrs();

    // 14.以下代码输出的结果是什么？应该怎样输出0,1,2,3
        // for(var i = 0; i <= 3; i++){
        //     setTimeout(() => {
        //         console.log(i);  //4 4 4 4     
        //     }, 0);    
        // }
        // 想输出0,1,2,3的话，可以把var换成let定义。
        // let在每一次循环都会重新声明变量 i ，随后每一个循环都会使用上一个循环时结束的值来再次初始化这个变量i。
        // 因为let存在的块级作用域 ，不受外部干扰。for循环和定时器共享同一个作用域的同一个变量，还因为同步异步，会先for循环完成++之后再进入定时器根据for循环次数打印。

            let request = new XMLHttpRequest();
            request.open('GET', 'http://demonuxtapi.dishait.cn/mobile/index', true);
            request.send();
            request.onreadystatechange = function(){
                if(request.readyState === XMLHttpRequest.DONE){
                    if(request.status === 200){
                        console.log('请求成功，获取数据');
                    }else{
                        console.log('请求失败，修改错误数据');
                    }
                }
            }
            
            
</script>
</html>